<template>
  <el-dialog class="myMap" title="选择地址" :visible.sync="map.visible" width="800px">
    <div class="dfac" style="margin: 20px 0">
      <div class="dfac">
        <span class="label">搜索地址</span>
        <el-input
          style="width: 250px"
          placeholder="请输入搜索地址"
          clearable
          prefix-icon="el-icon-search"
          v-model="mapConfig.keyword"
          class="input-with-select"
        >
          <el-button slot="append" icon="el-icon-search"></el-button>
        </el-input>
      </div>
      <div class="dfac">
        <span class="label">选中地址</span>
        <el-input
          style="width: 300px"
          placeholder="当前选中地址"
          prefix-icon="el-icon-location"
          v-model="mapConfig.chooseAddress"
          class="input-with-select"
        >
          <el-button slot="append" type="primary" @click="handelYes">确认</el-button>
        </el-input>
      </div>
    </div>
    <baidu-map
      :center="mapConfig.center"
      :scroll-wheel-zoom="true"
      :zoom="mapConfig.zoom"
      @click="getPoint"
      @ready="onBaiduMapReady"
      class="bm-view"
    >
      <bm-view class="map"></bm-view>
      <bm-marker :dragging="true" :position="mapConfig.position" @dragend="getPoint">
        <bm-info-window :show="mapConfig.showMark" style="font-size: 14px" v-on:close="infoWindowClose">
          <p>地址：{{ mapConfig.markAddress }}</p>
        </bm-info-window>
      </bm-marker>
      <bm-local-search
        :auto-viewport="true"
        :keyword="mapConfig.keyword"
        @infohtmlset="handelSearch"
        class="searchMap"
      ></bm-local-search>
    </baidu-map>
  </el-dialog>
</template>

<script>
export default {
  name: 'myMap',
  data: function () {
    return {
      addressData: {}, //选中地图信息
      mapConfig: {
        zoom: 15,
        center: {}, //地图中心
        position: {}, //定位
        showMark: false,
        markAddress: '', //点击地图获得的地址
        loaction: '', //搜索的城市
        keyword: '', //详细地址
        chooseAddress: '' //详细地址
      }
    }
  },
  props: {
    map: {
      type: Object,
      default: function () {
        return {
          //地图弹窗
          prop: '', //对应form的key
          visible: false,
          address: '',
          position: {}
        }
      }
    },
    position: {
      type: Object,
      default: function () {
        return {}
      }
    },
    needCode: {
      type: Boolean,
      default: false
    },
    address: {
      type: String,
      default: ''
    }
  },
  methods: {
    //点击地图
    getPoint(e) {
      // eslint-disable-next-line no-undef
      let geocoder = new BMap.Geocoder() //创建地址解析器的实例
      geocoder.getLocation(e.point, rs => {
        //地址描述
        this.mapConfig.position = e.point
        this.mapConfig.chooseAddress = rs.address
        this.mapConfig.markAddress = rs.address
        this.addressData = rs
      })
      this.mapConfig.showMark = true
    },
    //关闭mark层
    infoWindowClose() {
      this.mapConfig.showMark = false
    },
    //点击搜索的地区
    handelSearch(e) {
      this.addressData = e
      this.mapConfig.chooseAddress = e.address
    },
    //确认地址
    handelYes() {
      this.map.visible = false
      if (this.mapConfig.chooseAddress) this.addressData.address = this.mapConfig.chooseAddress
      this.$emit('chooseAddress', this.addressData)
    },
    //地图初始化时,定位当前位置
    onBaiduMapReady(e) {
      this.BMap = e.BMap
      if (this.BMap) {
        // eslint-disable-next-line no-undef
        const myCity = new BMap.LocalCity()
        myCity.get(async res => {
          if (this.map.position && JSON.stringify(this.map.position) !== '{}') {
            this.mapConfig.center = this.map.position
            this.mapConfig.position = this.map.position
            res.point = this.map.position
          } else {
            res.point = res.center
            this.mapConfig.center = res.center
            this.mapConfig.position = res.center
          }
          if (this.map.address) {
            this.mapConfig.keyword = this.address
            this.mapConfig.chooseAddress = this.address
          }
          this.addressData = res
        })
      }
    }
    /*地图方法*/
  }
}
</script>

<style scoped lang="scss">
.myMap {
  .map {
    height: 400px;
  }
  .searchMap {
    max-height: 300px;
  }
  .label {
    width: 100px;
    text-align: center;
  }
}
</style>
